<template>
  <div class="set-up flex w-full">
    <div class="left-setting-list" v-if="currentMenuItem">
      <div
        v-for="module in moduleList"
        :key="module.id + 'title'"
        class="module-item"
      >
        <template v-if="(isLogin && module.value === 'preference') || !isLogin">
          <div class="module-header">
            {{ $t(module.i18nName) }}
          </div>
          <ul style="margin: 8px 0; padding-left: 0">
            <li
              v-for="subItem in settingInfo[module.value]"
              class="content-item"
              :class="{
                'content-item-selected': currentMenuItem.id === subItem.id,
              }"
              :key="subItem.id + 'content'"
              @click="handleChangeMenu(subItem)"
            >
              <div class="content-icon">
                <svg-icon :icon-class="subItem.icon" />
              </div>
              <div class="content-text">
                {{ $t(subItem.i18nName) }}
              </div>
            </li>
          </ul>
        </template>
      </div>
    </div>
    <div class="center-line"></div>
    <div class="right-body">
      <div class="body-header">
        {{ currentMenuItem ? $t(currentMenuItem.i18nName) : "" }}
        <div class="body-header-closeBtn loc-center" @click="handleClose">
          <svg-icon icon-class="close" width="14" height="14" />
        </div>
      </div>
      <div class="body-content">
        <div style="width: 100%">
          <Account v-if="currentMenuItem.id === 1"></Account>
          <!-- 外观 -->
          <Appearance v-else-if="currentMenuItem.id === 2"></Appearance>
          <General v-else-if="currentMenuItem.id === 3"></General>
          <Shortcuts v-else-if="currentMenuItem.id === 4"></Shortcuts>
        </div>
      </div>
    </div>
  </div>
</template>
  
  <script>
import Account from "./set-up-account.vue";
import Appearance from "./set-up-appearance.vue";
import Shortcuts from "./set-up-shortcuts.vue";
import General from "./set-up-general.vue";
import { mapState } from "vuex";
export default {
  data() {
    return {
      currentMenuItem: null, // 当前的菜单项
      moduleList: [
        {
          id: 1,
          name: "账号信息",
          i18nName: "setup.accountInfo",
          value: "accountInfo",
        },
        {
          id: 2,
          name: "偏好设置",
          i18nName: "setup.preferrence",
          value: "preference",
        },
      ],
    };
  },
  props: {
    isLogin: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    ...mapState({
      settingInfo: (state) => state.systemStyle.settingInfo,
    }),
  },
  components: {
    Appearance,
    Account,
    Shortcuts,
    General,
  },
  created() {
    this.currentMenuItem = this.settingInfo[this.moduleList[1].value][0];
  },
  methods: {
    // 获取模块的菜单列表
    getModuleMenuList(module) {
      return this.settingInfo[module];
    },
    // 切换菜单项
    handleChangeMenu(row) {
      this.currentMenuItem = row;
    },
    //关闭弹窗
    handleClose() {
      this.$emit("handleClose");
    },
  },
};
</script>
  
<style lang="scss" scoped>
.set-up {
  height: 600px;
  background-color: var(--ui-component-background);
  color: var(--ui-text-color);

  .left-setting-list {
    width: 25%;
    height: 100%;
    padding-top: 20px;
    box-sizing: border-box;
    background-color: var(--app-modal-sider-background-color);

    .module-item {
      width: 100%;
      padding: 0 2%;

      .module-header {
        width: 100%;
        height: 20px;
        line-height: 20px;
        padding-left: 16px;
        font-size: 12px;
        color: var(--ui-breadcrumb-base-color);
      }

      .content-item {
        width: 100%;
        height: 32px;
        line-height: 32px;
        padding-left: 16px;
        margin: 4px 0 8px 0;
        font-size: 14px;
        display: flex;
        cursor: pointer;

        .content-icon {
          height: 32px;
          line-height: 32px;
          margin-right: 2%;
        }

        .content-text {
          width: calc(100% - 32px);
          height: 32px;
          line-height: 32px;
        }

        &:hover {
          border-radius: 6px;
          background: var(--app-secondary-4);
        }
      }

      .content-item-selected {
        border-radius: 6px;
        background-color: var(--ui-menu-item-active-bg);
      }
    }
  }

  .center-line {
    width: 2px;
    height: 100%;
  }

  .right-body {
    width: calc(75% - 2px);
    height: 100%;
    display: flex;
    flex-direction: column;

    // display: grid;
    // grid-template-rows: auto 1fr; /* 第一行自动高度，第二行撑满剩余空间 */
    .body-header {
      width: 100%;
      padding: 16px 20px 16px;
      font-size: 16px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .body-header-closeBtn {
        width: 25px;
        height: 100%;
        cursor: pointer;
      }
    }

    .body-content {
      width: 100%;
      overflow-y: auto;
      flex-grow: 1;
      /* 第一行自动高度，第二行撑满剩余空间,父元素display:flex;flex-direction:column */
      padding: 0 20px 20px;
      box-sizing: border-box;
    }
  }
}
</style>